<template>
   <view class="uv-page">
      <uv-cell-group>
         <uv-cell
            @click="showDatetimePicker(index)"
            :title="item.title"
            v-for="(item, index) in list"
            :key="index"
            isLink
         >
            <template v-slot:icon>
               <image class="uv-cell-icon" :src="item.iconUrl" mode="widthFix"></image>
            </template>
         </uv-cell>
      </uv-cell-group>
      <view>
         <uv-datetime-picker
            ref="datetimePicker1"
            v-model="value1"
            mode="datetime"
            :round="20"
            @confirm="confirm"
            @cancel="cancel"
            @change="change"
            @close="close"
         ></uv-datetime-picker>
         <uv-datetime-picker
            ref="datetimePicker2"
            v-model="value2"
            mode="date"
            @confirm="confirm"
            @cancel="cancel"
            @change="change"
            @close="close"
         ></uv-datetime-picker>
         <uv-datetime-picker
            ref="datetimePicker3"
            v-model="value3"
            mode="year-month"
            @confirm="confirm"
            @cancel="cancel"
            @change="change"
            @close="close"
         ></uv-datetime-picker>
         <uv-datetime-picker
            ref="datetimePicker4"
            v-model="value4"
            mode="year"
            @confirm="confirm"
            @cancel="cancel"
            @change="change"
            @close="close"
         ></uv-datetime-picker>
         <uv-datetime-picker
            ref="datetimePicker5"
            v-model="value5"
            mode="time"
            @confirm="confirm"
            @cancel="cancel"
            @change="change"
            @close="close"
         ></uv-datetime-picker>
         <uv-datetime-picker
            ref="datetimePicker6"
            v-model="value6"
            :filter="filter"
            mode="date"
            @confirm="confirm"
            @cancel="cancel"
            @change="change"
            @close="close"
         ></uv-datetime-picker>
         <uv-datetime-picker
            ref="datetimePicker7"
            v-model="value7"
            mode="date"
            :formatter="formatter"
            @confirm="confirm"
            @cancel="cancel"
            @change="change"
            @close="close"
         ></uv-datetime-picker>
         <uv-datetime-picker
            ref="datetimePicker8"
            v-model="value8"
            mode="datetime"
            :minDate="1587524800000"
            :maxDate="1893470400000"
            :closeOnClickOverlay="false"
            @confirm="confirm"
            @cancel="cancel"
            @change="change"
            @close="close"
         ></uv-datetime-picker>
      </view>
   </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const d = new Date();
const year = d.getFullYear();
const month = uni.$uv.padZero((d.getMonth() + 1).toString());
const date = d.getDate();

const datetimePicker1 = ref();
const datetimePicker2 = ref();
const datetimePicker3 = ref();
const datetimePicker4 = ref();
const datetimePicker5 = ref();
const datetimePicker6 = ref();
const datetimePicker7 = ref();
const datetimePicker8 = ref();

const value1 = ref(Number(new Date()));
const value2 = ref(Number(new Date()));
const value3 = ref(Number(new Date()));
const value4 = ref(Number(new Date()));
const value5 = ref('05:28');
const value6 = ref(Number(new Date()));
const value7 = ref(Number(new Date()));
const value8 = ref(Number(new Date()));

const list = ref([
   {
      title: '完整日期时间',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/datetime-picker/6.png',
   },
   {
      title: '年月日',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/datetime-picker/4.png',
   },
   {
      title: '年月',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/datetime-picker/3.png',
   },
   {
      title: '年',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/datetime-picker/2.png',
   },
   {
      title: '时间',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/datetime-picker/5.png',
   },
   {
      title: '过滤器(保留偶数年)',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/datetime-picker/2.png',
   },
   {
      title: '格式化',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/datetime-picker/1.png',
   },
   {
      title: '限制最大最小值',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/datetime-picker/7.png',
   },
]);

const showDatetimePicker = (index: number) => {
   switch (index) {
      case 0:
         datetimePicker1.value.open();
         break;
      case 1:
         datetimePicker2.value.open();
         break;
      case 2:
         datetimePicker3.value.open();
         break;
      case 3:
         datetimePicker4.value.open();
         break;
      case 4:
         datetimePicker5.value.open();
         break;
      case 5:
         datetimePicker6.value.open();
         break;
      case 6:
         datetimePicker7.value.open();
         break;
      case 7:
         datetimePicker8.value.open();
         break;
   }
};

const close = () => {
   console.log('close');
};

const cancel = () => {
   console.log('cancel');
};

const change = (e: any) => {
   console.log('change', e);
};

const confirm = (e: any) => {
   console.log('confirm', e);
   result(e.value, e.mode);
};

const result = (value: any, mode: any) => {
   switch (mode) {
      case 'datetime':
         return uni.$uv.toast(uni.$uv.formatTime(value, 'yyyy-mm-dd hh:MM'));
      case 'date':
         return uni.$uv.toast(uni.$uv.formatTime(value, 'yyyy-mm-dd'));
      case 'year-month':
         return uni.$uv.toast(uni.$uv.formatTime(value, 'yyyy-mm'));
      case 'time':
         return uni.$uv.toast(value);
      case 'year':
         return uni.$uv.toast(uni.$uv.formatTime(value, 'yyyy'));
      default:
         return '';
   }
};

const filter = (type: string, options: any) => {
   if (type === 'year') {
      return options.filter((option: any) => option % 2 === 0);
   }
   return options;
};

const formatter = (type: string, value: any) => {
   if (type === 'year') {
      return `${value}年`;
   }
   if (type === 'month') {
      return `${value}月`;
   }
   if (type === 'day') {
      return `${value}日`;
   }
   return value;
};
</script>

<style lang="scss" scoped>
.uv-page {
   padding: 0;
}
</style>
